<template>
  <div class="region-list">
    <mt-header fixed :title="$t('m.Region')">
      <router-link to="/main" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <ul class="regions-box">
      <li v-for="item in regions"  @click="changeRegion(item.value)">
        <div v-if="item.value == regionId" class="is-active">{{item.text}}</div>
        <div v-else>{{item.text}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
  // 英语josn
  import regions from '@/json/region'
  // 缅甸语json
  import mm_regions from '@/mmJson/region'

  // 缅甸unicode
  import mmu_regions from '@/mmUnicodeJson/region'

  export default {
    name: 'Regions',
    data () {
      return {
        regionId:2,
      }
    },
    methods: {
      changeRegion (id) {
        localStorage.setItem('regionIndexId', id)
        this.$router.push('main')
      },
    },
    computed: {
      regions() {
        if (this.$store.state.localLang == 'MM') {
          return mm_regions
        }else if(this.$store.state.localLang == 'MMU'){
          return mmu_regions
        } else {
          return regions
        }
      },
    },
    mounted () {
      let regionIndexId = localStorage.getItem('regionIndexId')
      if (regionIndexId) {
        this.regionId = regionIndexId
      }
    },
  }
</script>

<style>
  .region-list .mint-header{
    background-color: #fff;
    color: #000;
    height: 45px;
    border-bottom: 1px solid #f0f0f0;
  }
.region-list .mint-header-title{
  line-height: 1.5;
  margin: 0;
}
  .regions-box{
    margin-top:48px;
    padding:0;
  }
  .regions-box li {
    height:48px;
    Line-height:48px;
    text-align:left;
    padding:0 20px;
    border-bottom:1px solid #f0f0f0;
  }
  .regions-box li:last-child {
    border-bottom:none;
  }
  .is-active{
    color:rgb(255, 153, 0);
  }
</style>
